<template>
  <div>
    <ZgDialog
      :width="view.width"
      :top="view.top"
      :title="view.title"
      :showFooter="true"
      v-model="visible"
      @ok="onOk"
    >
      <div>
        <h3 class="title">画像配置<span>修改后第二天生效配置</span></h3>
        <div class="times">
          <h4 class="title-sub">执行周期</h4>
          <ZgSelect
            class="score-max-select"
            :options="timesOptions"
            v-model="time"
            :width="120"
          />
        </div>
        <h4 class="title-sub">基础信息（5）</h4>
        <Item
          :title="'行业分类'"
          :scoreOptions="scoreOptions"
          :exceedType="'input'"
          :exceedOptions="exceedOptions"
          :initialRows="initialRows"
        ></Item>
        <Item
          :title="'存续时间'"
          :scoreOptions="scoreOptions"
          :exceedType="'select'"
          :exceedOptions="exceedOptions"
          :initialRows="initialRows"
        ></Item>
        <h4 class="title-sub">经营信息（2）</h4>
        <Item
          :title="'行业分类'"
          :scoreOptions="scoreOptions"
          :exceedType="'input'"
          :exceedOptions="exceedOptions"
          :initialRows="initialRows"
        ></Item>
        <Item
          :title="'存续时间'"
          :scoreOptions="scoreOptions"
          :exceedType="'select'"
          :exceedOptions="exceedOptions"
          :initialRows="initialRows"
        ></Item>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  components: {
    Item
  },
  props: {
    inputClick: {
      type: Function,
      default: (t) => {}
    }
  },
  data () {
    return {
      visible: false,
      view: {
        width: '80%',
        top: '5%',
        title: '平台画像配置'
      },
      obj: null,
      other: {},
      time: null,
      timesOptions: [
        { label: '1', value: '每个月一次' },
        { label: '2', value: '每季度一次' },
        { label: '3', value: '每年一次' }
      ],
      // 最高分下拉选项
      scoreOptions: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' }
      ],
      // 超过列为下拉时的选项
      exceedOptions: [
        { label: '2年', value: '2年' },
        { label: '3年', value: '3年' },
        { label: '5年', value: '5年' }
      ],
      // 初始行数据
      initialRows: [
        { exceed: '2年', score: '10' }
      ]
    }
  },
  mounted () {},
  methods: {
    open (json) {
      this.obj = Object.assign({}, this.obj, json || {})
      console.log('获取的行数据', this.obj)
      this.visible = true
    },
    onOk () {
      this.obj = null
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  padding-bottom:10px;
  font-size:18px;
  color:#333;
  font-weight: 700;
  span{
    font-size: 14px;
    font-weight: 500;
    float: right;
  }
}
.title-sub{
  font-size: 14px;
  color:#333;
  font-weight: 700;
  min-width:130px;
  line-height: 30px;
}
.times{
  display: flex;
}
</style>
